<template>
	<view class="bg">
		<view class="back">

		</view>
		<view class="title">
			<view class="title1">
				输入短信验证码
			</view>
			<view class="title2">
				已向你的手机{{phone}}发送验证码
			</view>
		</view>
		<view class="verification-code-input">
			<input class="cinput" adjust-position="false" auto-blur="true" @blur="blur" @input="codenum" :focus="focus"
				value="code" v-model="code" type="number" maxlength="4" />
			<view class="code-input">
				<view v-for="(item,index) in 4" :key="index" @click="codefocus(index)" class="code"
					:style='(index == code.length? "border: 5rpx solid #1195db;width: 80rpx;height: 80rpx;line-height: 80rpx;":"color: " + codeclolor + ";" +"border: 2rpx solid" + codeclolor)'>
					{{code[index]||''}}
				</view>
			</view>
		</view>
		<view class="noMessages">
			<text>重新发送</text>
		</view>
		<view class="login" @click="getLogin">
			下一步
		</view>
		<view class="btn_back" @click="back">
			返回
		</view>
	</view>
</template>
<script>
	// import {
	// 	zim
	// } from '@/zim/index.js';
	import {
		generateToken
	} from '@/im/js/config.js';
	export default {
		data() {
			return {
				// 验证码输入聚焦
				focus: true, //input焦点，用于键盘隐藏后重新唤起
				// 验证码框颜色
				codeclolor: "#313131", //自定义光标的颜色
				// 验证码获取秒数
				sec: '50', //这是重新获取验证码的倒计时
				code: '', //这是用户输入的验证码
				phone: 0
			};
		},
		methods: {
			// 输入验证码
			codenum(event) {
				let code = event.target.value
				this.code = code
			},
			// 键盘隐藏后设置失去焦点
			// blur() {
			// 	this.focus = false
			// },
			// 点击自定义光标显示键盘
			codefocus(e) {
				this.focus = true
			},
			back() {
				uni.navigateBack()
			},
			async getLogin() {
				let _this = this;
				if (this.code.length < 4) {
					this.$pv.msg('请输入正确的验证码')
				} else {
					let res = await this.$api.post('/User/MobileLogin', {
						Phone: this.phone,
						SMSCode: this.code.toString()
					})
					// console.log(res.data);
					uni.setStorageSync('xj_token', res.data.Token);

					let user = res.data.UserData;

					if (user.IsAuth == 0) {
						//新用户，直接跳注册页面
						this.nav_to('/pages/start/start2');

						return;
					}

					// console.log('login user ' + JSON.stringify(user));
					uni.setStorageSync('user', user);
					
					//本地存储用户手机号
					uni.setStorageSync('app_user_mobile', this.phone);
					
					this.$store.commit('setUser', user);
					this.$store.commit('login', true);
					uni.getLocation({
						type: 'gcj02',
						success: async function(r2) {
							let r = await _this.$api.post('/Member/SaveOnlineData', {
								Last_Lat: r2.latitude,
								Last_Lng: r2.longitude
							})
						},
						fail: function(err) {

						}
					});
					let zimUser = {
						userID: user.UserID + "",
						userName: user.Name,
					}
					let zimToken = generateToken(zimUser.userID)
					let userAvatarUrl = user.HeadImgUrl;

					uni.setStorageSync('zimData', JSON.stringify({
						zimUser,
						zimToken,
						userAvatarUrl
					}))
					zim.login(zimUser, zimToken, userAvatarUrl).then(() => {
						console.log('yzmLogin vue   getLogin  zim登录成功');
					}).catch((err)=>{
						console.log('yzmLogin vue   getLogin  zim登录失败',err);
					})
					uni.switchTab({
						url: '/pages/tab/assistant'
					})
				}

			},
		},
		onLoad(e) {
			this.phone = e.phone
		},
	};
</script>

<style lang="scss">
	body,
	html {
		width: 100%;
		height: 100vh;
	}

	.bg {
		box-sizing: border-box;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		padding: 0 40rpx;
		padding-top: 60rpx;

		.back {
			width: 60rpx;
			height: 120rpx;

			text-align: center;
			line-height: 60rpx;
			font-size: 60rpx;
			font-weight: 500;
			color: #000;
		}

		.title {
			margin: 60rpx 0 30rpx 16rpx;

			.title1 {
				font-size: 24px;
				color: #000;
			}

			.title2 {
				font-size: 14px;
				color: #333;
			}
		}

		.noMessages {
			display: flex;
			justify-content: flex-end;
			margin-top: 20rpx;
			margin-right: 10rpx;

			text {
				color: #0000FF;
				font-size: 15px;
			}

		}

		.login {
			width: 100%;
			box-sizing: border-box;
			box-shadow: 0px 4rpx 16rpx 0px rgba(46, 46, 46, 0.4);
			background-image: linear-gradient(225deg, rgba(2, 2, 2, 0.9) 0, rgba(54, 54, 54, 0.9) 100%);
			border-radius: 6px;
			margin-top: 40rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 90rpx;
		}

		.btn_back {
			width: 100%;
			box-shadow: 0px 4px 10px 0px rgba(46, 46, 46, 0.4);
			border-radius: 6px;
			text-align: center;
			margin-top: 40rpx;
			color: #000;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 90rpx;
		}
	}

	.code-input {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.code {
		width: 56px;
		height: 56px;
		text-align: center;
		line-height: 56px;
		font-size: 24px;
		border: none;
		outline: none;
		background-color: transparent;
		margin-right: 8px;
		border-bottom: 1px solid #999
	}

	.cinput {
		position: fixed;
		left: -100rpx;
		width: 50rpx;
		height: 50rpx;
	}
</style>